<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-select.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <script src="./lib/bootstrap-select.min.js"></script>
    <!-- SHA256 -->
    <script type="text/javascript" src="./lib/core-min.js"></script>
    <script type="text/javascript" src="./lib/sha256.js"></script>
    <script type="text/javascript" src="./lib/enc-base64-min.js"></script>
    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <!-- js -->
    <script src="./js/ConstData.js"></script>
    <script src="./js/navManager.js"></script>
    <script src="./js/foot-tab-bar.js"></script>
    <script src="./js/tool.js"></script>
    <script src="./js/admin.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/mainFrame.css">
    <link rel="stylesheet" type="text/css" href="./css/tab-bar.css">
    <link rel="stylesheet" type="text/css" href="./css/admin.css">
    <!-- icon -->
    <script src="./icon/iconfont.js"></script>
    <style type="text/css">
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="module-list">
        <div id="login" class="module" style="height: auto;min-height: 10vw;line-height: 100%;">
            <div id="login_success" style="display: none;">
                <h1 style="padding: 5vw;">已登录</h1>
            </div>
            <div id="login_fail">
                <table style="width:100%">
                    <tr>
                        <th colspan="2">
                            <h1>登录</h1>
                        </th>
                    </tr>
                    <tr>
                        <td align="right">
                            <p>用户名:</p>
                        </td>
                        <td align="left"><input id="username" type="text" name="username" style="width: 90%" /></td>
                    </tr>
                    <tr>
                        <td align="right">
                            <p>密码:</p>
                        </td>
                        <td align="left"><input id="password" type="password" name="password" style="width: 90%" /></td>
                    </tr>
                    <tr>
                        <td colspan="2"><button type="button" class="btn btn-primary" onclick="login($('#username').val(),$('#password').val())">登录</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="func_btn" class="btn-group" style="margin: 1vw;">
            <script type="text/javascript">
            $(() => $(".functions>span.func_module").each((i, e) => $("#func_btn").append(`<button type="button"class="btn btn-default"onclick="window.location.hash='${e=e.id}'">${e}</button>`)));
            </script>
        </div>
        <div class="functions">
            <span id="create_cat" class="module func_module">
                <span id="create_cat_input" class="cat_info module-list ">
                </span>
                <button onclick="create_cat();" type="button" class="btn btn-primary btn-lg" style="margin: 10vw auto;width: 70%;">创建猫咪</button>
                <script type="text/javascript">
                (() => {
                    let tar = $("#create_cat_input");
                    let text = k => `<input type="text" id="create_cat_${k.v}" placeholder="${k.v}" />`,
                        ENUM = field => {
                            let values = getTableIndexValues('basic_info', field, true);
                            values['空'] = "none' selected='selected";
                            let ele = '';
                            for (let key in values) ele += `<option value='${values[key]}'>${key}</option>`;
                            return k => `<select id="create_cat_${k.v}" class="">${ele}</select>`;
                        },

                        DATE = isDim => {
                            if (isDim) {
                                return k => {
                                    d = toAgeData(0);
                                    let EY = d.isEstimate ? d.extraYear : 0;
                                    let EM = d.isEstimate ? d.extraMonth : 1;
                                    let yEle = (() => {
                                        let ele = '';
                                        for (let i = 0; i <= 42; i++)
                                            ele += `<option value='${i}'${i===EY?"selected='selected'":''}>${i}年</option>`;
                                        return ele;
                                    })();
                                    let mEle = (() => {
                                        let ele = '';
                                        for (let i = 1; i <= 12; i++)
                                            ele += `<option value='${i}'${i===EM?"selected='selected'":''}>${i}个月</option>`;
                                        return ele;
                                    })();
                                    return `<div class="editField"><input id="create_cat_${k.v}" type="hidden"><input style="width:100%;border:0;line-height:6vw" type="date" onchange="" value="${d.date}"><br><button type="button" class="btn btn-primary ${d.isEstimate?'active':''}" style="width:99%;"onclick="if ($(this).hasClass('active')){$(this).removeClass('active').html('估计年龄');$(this.nextSibling).hide();}else{$(this).addClass('active').html('取消估计年龄');$(this.nextSibling).show();}">${d.isEstimate?'取消估计年龄':'估计年龄'}</button><div ${d.isEstimate?'':'style="display:none"'}><select onchange="ageSelecterListener(this)"style="width:40%">${yEle}</select><select style="width:60%">${mEle}</select></div></div>`;
                                };
                            } else return k => `<input type="date" id="create_cat_${k.v}" value="">`;
                        };
                    let keys = getTableKeys('basic_info');
                    let data = {};
                    for (let k in tableKey)
                        if (tableKey[k].t === 'basic_info') switch (tableKey[k].c) {
                            case 'str':
                                data[k] = text;
                                break;
                            case 'date':
                                data[k] = DATE(false);
                                break;
                            case 'age':
                                data[k] = DATE(true);
                                break;
                            case 'enum':
                                data[k] = ENUM(tableKey[k].v);
                                break;
                        }
                    create_cat_data = () => {
                        create_cat_dataSummoner();
                        let upload = {};
                        for (let key in data) {
                            let field = keys[key];
                            if ($(`#create_cat_${field.v}_none`).prop("checked")) continue;
                            let upload_value = $(`#create_cat_${field.v}`).val();
                            upload_value && upload_value != 'none' && (upload[key] = upload_value);
                        }
                        return upload;
                    };
                    for (let key in data) {
                        let field = keys[key];
                        if (!field) return;
                        let ele = `<span valign="top" class="module"><div>${field.n}</div>${data[key](field)}</span>`;
                        tar.append(ele);
                    }
                })();
                </script>
            </span>
            <span id="upload_img" class="module func_module">
                <h1>上传图片</h1>
                <p><input id="upload_img_select" style="width:95%;" type="file" name="upload_img_select" multiple="multiple" /></p>
                <p><select id="upload_img_cat" style="width:95%;">
                        <script type="text/javascript">
                        (() => {
                            let tar = $("#upload_img_cat");
                            tar.html(`<option selected='selected' value='0'>空</option>`);
                            for (let key in all_cats_info) tar.append(`<option value='${key}'>${all_cats_info[key].b}</option>`);
                        })();
                        </script>
                    </select></p>
                <p><button type="button" class="btn btn-primary" onclick="uploadImg()">上传</button></p>
            </span>
            <span id="view_img" class="module func_module">
                <div class="module-list">
                    <span class="module l-module" style="width: 90vw;padding: 2vw;">
                        <span style="width:10%;">选择猫咪:</span>
                        <select id="view_img_selecter" style="width:95%;" onchange="this.value&&getImgs(this.value,0);">
                            <script type="text/javascript">
                            (() => {
                                let tar = $("#view_img_selecter");
                                tar.html(`<option selected='selected' value='0'>空</option>`);
                                for (let key in all_cats_info) tar.append(`<option value='${key}'>${all_cats_info[key].b}</option>`);
                            })();
                            </script>
                        </select>
                    </span>
                    <div id="view_img_content"></div>
                </div>
            </span>
            <span id="view_table_value" class="module func_module">
                <div class="module-list">
                    <select id="VTV-table_select" style="width:95%;" onchange="showTableValue('table',this.value);">
                        <script>
                        $(() => {
                            let tar = $("#VTV-table_select");
                            tar.html(`<option selected value=''>空</option>`);
                            for (let key in nameOfData) tar.append(`<option value='${key}'>${key}</option>`);
                        });
                        </script>
                    </select>
                    <select id="VTV-field_select" style="width:95%;" onchange="showTableValue('field',this.value);">
                        <option selected='selected' value=''>空</option>
                    </select>
                    <span id="VTV-data_select"></span>
                </div>
            </span>
            <span id="invite_code" class="module func_module">
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="flushInviteCode()">刷新</button>
                    <button class="btn btn-primary" onclick="summonInviteCode(1)">生成1个</button>
                    <button class="btn btn-primary" onclick="summonInviteCode(10)">生成10个</button>
                </div>
                <div id="invite_code_content" style="font-size: 0.7em;font-weight: normal;"></div>
            </span>
            <!-- functions -->
        </div>
    </div>
</body>

</html>